<template>
  <div>
    <van-nav-bar
  title="账号注册"
  left-arrow
   @click-left="router.back()"
/>
    <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="username"
    placeholder="请输入账号"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    placeholder="请输入密码"
    :rules="[
    { required: true, message: '请填写密码' },
    {pattern:/^\w{5,}$/,message:'用户名不得少于5个字符'}
    ]"
  />
  <div style="margin: 16px;">
    <van-button block style="backgroundColor:#21b97a" native-type="submit">注册</van-button>
  </div>
</van-form>
  <router-link class="link" to="/login">已有账号，去登录</router-link>
  </div>
</template>

<script>
import { register } from '@/api/user'
export default {
  name: 'RegisterPage',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async onSubmit (values) {
      console.log('submit', values)
      const res = await register(values)
      // console.log(res)
      this.$toast.success(res.description)
      // 跳转页面
      this.$router.push('/login')
    }
  }
}
</script>

<style>
.van-nav-bar{
  background-color:#21b97a ;
}
.van-nav-bar__title {
    margin: 0 auto;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}
.van-icon-arrow-left:before {
    color: #fff;
}
.van-button__text {
    font-size: 4.8vw;
    color: #fff;
}
.van-cell {
    height: 80px;
}
.van-cell__value--alone {
    margin-top: 30px;
    border-bottom: solid 3px #eeeeee;
}
.link{
  text-align: center;
}
.link {
  display:inline-block ;
  width: 100%;
  color:#747474
 }
</style>
